<template>
  <div ref="varTreeNodeRow" class="v-simulation-operation _panel-content-wrapper">
    <div class="g-jc-sb _variable">
      <div class="_variable-name g-pd-l-5">{{$t('name')}}</div>
      <div class="_variable-value g-pd-l-15"> 
        <div 
          class="rightLine" 
          :class="{ indragging: TreeNodeDragItem.indragging }" 
          @mousedown="handleMouseDown($event)">
        </div>
        {{$t('value')}}
      </div>
    </div>

    <div class="variables">
      <div class="_var-tree">
        <VariableNode
          v-for="item in variableData" 
          :key="item.valueId" 
          :nodeData="item"
          is-root
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive, provide, ref } from "vue";
import { controller } from "@/engine/Controller";
import { TreeNodeDrag } from "@/engine/types/variable";
import VariableNode from './VariableNode.vue';

const TreeNodeDragItem = reactive(new TreeNodeDrag()) as TreeNodeDrag;

provide('TreeNodeDragItem', TreeNodeDragItem);

const varTreeNodeRow = ref();

const handleMouseDown = (event: MouseEvent) => {
  TreeNodeDragItem.mouseStartX = event.clientX;
  TreeNodeDragItem.indragging = true;
  window.addEventListener('mousemove', handleMouseMove);
  window.addEventListener('mouseup', handleMouseUp);
};

const handleMouseMove = (event: any) => {
  const cha = event.clientX - TreeNodeDragItem.mouseStartX;
  const test = (cha / varTreeNodeRow.value.offsetWidth) * 100;
  let value = TreeNodeDragItem.currentWidth - test;
  TreeNodeDragItem.changeCurrentWidth(value);
  TreeNodeDragItem.mouseStartX = event.clientX;
};

const handleMouseUp = () => {
  TreeNodeDragItem.indragging = false;
  window.removeEventListener('mousemove', handleMouseMove);
  window.removeEventListener('mouseup', handleMouseUp);
};

const currentWidth = computed(() => {
  return TreeNodeDragItem.getCurrentWidth;
});

const variableData = reactive(controller.variableService.variableData);

</script>
<style lang="scss">
.v-simulation-operation {
  height: calc(100% - 2px);

  &._panel-content-wrapper {
    ._input {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }

  ._panel-content {
    padding: 4px 16px;
    overflow: auto;
    max-height: calc(100% - 40px);

    .__log-time {
      color: #969899;
    }
  }

  ._variable {
    padding-left: 10px;
    height: 24px;
    line-height: 24px;
    background: #f6fcff;

    ._variable-value {
      box-sizing: border-box;
      width: v-bind(currentWidth);
      border-left: 1px solid #d9d9d9;
      border-right: 1px solid #d9d9d9;
      position:relative;
      .rightLine {
        position: absolute;
        left: -2px;
        height: 25px;
        width: 3px;
        top: 0px;
        background-color: #dcd9d6;
        z-index:999;
        opacity: 0;
      }
    }
    .indragging {
      background-color: #A2B3CD;
      opacity: 1;
    }
  }

  .variables {
    height: calc(100% - 24px);
    overflow: hidden auto;
    overflow-y: overlay;
    border: 1px solid #dcd9d6;
    background-size: 50% 24px, 50% 24px;
    ._var-tree {
      width: 100%;
      overflow:hidden;
      display:inline-block;
      vertical-align: top;
    } 
  }

  ._update-variable-value-tip {
    color: red;
    padding: 10px;
  }
}
</style>
